<template>
  <div class="change-password-form">
    <div class="form-header">
      <h3>修改密码</h3>
      <p>为了您的账户安全，请定期更新密码</p>
    </div>

    <a-form
      :model="formState"
      :rules="rules"
      layout="vertical"
      @finish="handleSubmit"
      class="password-form"
    >
      <a-form-item label="当前密码" name="currentPassword">
        <a-input-password
          v-model:value="formState.currentPassword"
          placeholder="请输入当前密码"
          :maxlength="50"
        />
      </a-form-item>

      <a-form-item label="新密码" name="newPassword">
        <a-input-password
          v-model:value="formState.newPassword"
          placeholder="请输入新密码"
          :maxlength="50"
        />
      </a-form-item>

      <a-form-item label="确认新密码" name="confirmPassword">
        <a-input-password
          v-model:value="formState.confirmPassword"
          placeholder="请再次输入新密码"
          :maxlength="50"
        />
      </a-form-item>

      <div class="password-tips">
        <h4>密码要求：</h4>
        <ul>
          <li :class="{ valid: passwordStrength.length }">至少6个字符</li>
          <li :class="{ valid: passwordStrength.hasNumber }">包含数字</li>
          <li :class="{ valid: passwordStrength.hasLetter }">包含字母</li>
          <li :class="{ valid: passwordStrength.hasSpecial }">包含特殊字符（推荐）</li>
        </ul>
      </div>

      <a-form-item>
        <a-space>
          <a-button
            type="primary"
            html-type="submit"
            :loading="loading"
            :disabled="!isFormValid"
            class="submit-btn"
          >
            修改密码
          </a-button>
          <a-button @click="handleCancel"> 取消 </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';
import { computed, reactive, ref, watch } from 'vue';

interface PasswordForm {
  currentPassword: string;
  newPassword: string;
  confirmPassword: string;
}

const emit = defineEmits<{
  submit: [data: PasswordForm];
  cancel: [];
}>();

const loading = ref(false);

const formState = reactive<PasswordForm>({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
});

// 密码强度检查
const passwordStrength = computed(() => {
  const password = formState.newPassword;
  return {
    length: password.length >= 6,
    hasNumber: /\d/.test(password),
    hasLetter: /[a-zA-Z]/.test(password),
    hasSpecial: /[!@#$%^&*(),.?":{}|<>]/.test(password),
  };
});

// 表单验证
const isFormValid = computed(() => {
  return (
    formState.currentPassword.trim() &&
    formState.newPassword.trim() &&
    formState.confirmPassword.trim() &&
    formState.newPassword === formState.confirmPassword &&
    passwordStrength.value.length
  );
});

const rules = {
  currentPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
    {
      validator: (_: any, value: string) => {
        if (value && value === formState.currentPassword) {
          return Promise.reject('新密码不能与当前密码相同');
        }
        return Promise.resolve();
      },
      trigger: 'blur',
    },
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (_: any, value: string) => {
        if (value && value !== formState.newPassword) {
          return Promise.reject('两次输入的密码不一致');
        }
        return Promise.resolve();
      },
      trigger: 'blur',
    },
  ],
};

const handleSubmit = async () => {
  try {
    loading.value = true;

    // 验证密码强度
    if (!passwordStrength.value.length) {
      message.warning('密码长度不能少于6位');
      return;
    }

    if (formState.newPassword !== formState.confirmPassword) {
      message.warning('两次输入的密码不一致');
      return;
    }

    if (formState.newPassword === formState.currentPassword) {
      message.warning('新密码不能与当前密码相同');
      return;
    }

    // 发送修改密码请求
    emit('submit', { ...formState });
  } catch (error) {
    console.error('修改密码失败:', error);
    message.error('修改密码失败，请重试');
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  // 清空表单
  formState.currentPassword = '';
  formState.newPassword = '';
  formState.confirmPassword = '';
  emit('cancel');
};

// 监听新密码变化，清空确认密码
watch(
  () => formState.newPassword,
  () => {
    if (formState.confirmPassword && formState.newPassword !== formState.confirmPassword) {
      formState.confirmPassword = '';
    }
  }
);
</script>

<style lang="less" scoped>
.change-password-form {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  .form-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 4px 0;
    }

    p {
      font-size: 14px;
      color: #64748b;
      margin: 0;
    }
  }

  .password-form {
    padding: 24px;

    :deep(.ant-form-item-label) {
      font-weight: 500;
      color: #374151;
    }

    .ant-input-password {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      transition: all 0.2s ease;

      &:hover,
      &:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
      }
    }

    .password-tips {
      margin: 16px 0 24px;
      padding: 16px;
      background: #f8fafc;
      border-radius: 8px;
      border-left: 3px solid #667eea;

      h4 {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin: 0 0 8px 0;
      }

      ul {
        margin: 0;
        padding-left: 16px;
        list-style: none;

        li {
          font-size: 13px;
          color: #64748b;
          margin-bottom: 4px;
          position: relative;

          &::before {
            content: '✗';
            position: absolute;
            left: -16px;
            color: #ef4444;
          }

          &.valid {
            color: #059669;

            &::before {
              content: '✓';
              color: #059669;
            }
          }
        }
      }
    }

    .submit-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      border-radius: 8px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      transition: all 0.2s ease;

      &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
      }

      &:active {
        transform: translateY(0);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }

    .ant-btn:not(.submit-btn) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      color: #64748b;
      transition: all 0.2s ease;

      &:hover {
        border-color: #667eea;
        color: #667eea;
      }
    }
  }
}
</style>
